<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/consult.css">
    <title>咨询与服务</title>
</head>
<body>
    <header>
        <div class="claerFlex">
            <div class="left_box">
                <img src="./img/u160.png" alt="">
                <h3 class="margin_10 font_24">LOGO</h3>
            </div>
            <div class="right_box">
                <ul class="listStyle">
                    <li><a href="./index.html" >企业主页</a></li>
                    <li><a href="./product.html ">产品</a></li>
                    <li><a href="./programme.html" >解决方案</a></li>
                    <li><a href="./customer.html" >客户案列</a></li>
                    <li><a href="./consult.html" class="active">咨询与服务</a></li>
                    <li><a href="./news.html">企业新闻</a></li>
                    <li><a href="./join.html">加入我们</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div style="padding-top: 100px;"></div>
    <main>
        <img src="./img/u1216.png" alt="">
        <div class="mask"></div>
        <div class="container claerFlex count">
            <div class="left_box">
                <p class="font_30">立即咨询</p>
                <p class="font_20 font_black">为了更好与您服务，请填写以下信息，我们将尽快安排架构师与您联系！</p>
                <img src="./img/back.svg" alt="" id="back">
                <form  id="form" >
                   <div class="left_list">
                        <dl>
                            <dt><p class="font_24">您咨询的是产品/解决方案：</p></dt>
                            <dd><select name="type" id="select_1">
                                <!-- <option value="1">产品</option>
                                <option value="2">解决方案</option> -->
                            </select></dd>
                        </dl>
                        <dl>
                            <dt><p class="font_24">您咨询的内容为：</p></dt>
                            <dd><select name="plan" id="select_2">
                                <!-- <option value="1">行业方案1</option>
                                <option value="2">行业方案2</option>
                                <option value="3">行业方案3</option>
                                <option value="4">行业方案4</option>
                                <option value="5">行业方案5</option> -->
                            </select></dd>
                        </dl>
                        <dl>
                            <dt><p class="font_24">请描述您遇到的问题：</p></dt>
                            <dd><textarea name="count" id="count" cols="30" rows="10"></textarea></dd>
                        </dl>
                   </div>
                   <div class="right_list">
                    <dl>
                        <dt><p class="font_24">您的姓名：</p></dt>
                        <dd><input type="text" name="user" id="user"></dd>
                    </dl>
                    <dl>
                        <dt><p class="font_24">您的公司：</p></dt>
                        <dd><input type="text" name="company" id="company"></dd>
                    </dl>
                    <dl>
                        <dt><p class="font_24">您的电话：</p></dt>
                        <dd><input type="text" name="phone" id="phone"></dd>
                    </dl>
                    <dl>
                        <dt><p class="font_24">您的邮箱：</p></dt>
                        <dd><input type="text" name="email" id="email"></dd>
                    </dl>
                   </div>
                   <button class="font_24" id="sub">提交咨询申请</button>
                </form>
            </div>
            <div class="right_box">
                <div>
                    <p class="font_30">其他联系方式</p>
                    <ul>
                        <li>
                            <img src="./img/u548.png" alt="">
                            <p class="font_20">XXX-XXXXXXXXX</p>
                        </li>
                        <li>
                            <img src="./img/u550.png" alt="">
                            <p class="font_20">XXXXXX@XXX.com</p>
                        </li>
                    </ul>
                    <div>
                        <a href="./service.html">
                            <img src="./img/u540.png" alt="">
                            <p class="font_20 font_bule">售前客服咨询</p>
                        </a>
                        <a href="./service.html">
                            <img src="./img/u540.png" alt="">
                            <p class="font_20 font_bule">售后客服咨询</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
<script src="./js/ajax.js"></script>
<script>
    window.onload = ()=>{
        let arr = [
        {
            name:'产品',
            msg:[
                '产品1',
                '产品2',
                '产品3',
                '产品4',
                '产品5',
            ]
        },
        {
            name:'解决方案',
            msg:[
                '方案1',
                '方案2',
                '方案3',
                '方案4',
                '方案5',
            ]
        }
    ]

    let select_1 = document.querySelector('#select_1');
    let select_2 = document.querySelector('#select_2');
    let back_btn = document.querySelector('#back');
    let sub_bnt = document.querySelector('#sub');
    let form = document.querySelector('#form');
    form.addEventListener('submit',(e)=>{
        //e.stopPropagation();
        e.preventDefault();
        let type = select_1.value;
        let plan = select_2.value;
        let count1 = count.value;
        let user1 = user.value;
        let company1 = company.value;
        let phone1 = phone.value;
        let email1 = email.value;
        if(!type||!plan||!count||!count1||!user1||!company1||!phone1||!email1){
            alert('不能为空')
            return;
        }
        post({
            type:'POST',
            url:'/v1/consult/sub',
            data: {
                c_type:type,
                c_plan:plan,
                count:count1,
                user:user1,
                company:company1,
                phone:phone1,
                email:email1
            },
            success:function(res){
                if(res.code === 200){
                    //console.log(res)
                    alert(res.msg)
                }else{
                    alert(res.msg)
                }
            }
        })
    })
    // sub_bnt.addEventListener('click',(e)=>{
    //     // let obj = {};
    //     // let url = location.search;
    //     // let str  = url.substr(1,url.toString().length);
    //     // let strList = str.split('&');
    //     // for(let i=0;i<strList.length;i++){
    //     //     obj[strList[i].split('=')[0]] = strList[i].split('=')[1];
    //     // }
    //     let type = select_1.value;
    //     let plan = select_2.value;
    //     let count1 = count.value;
    //     let user1 = user.value;
    //     let company1 = company.value;
    //     let phone1 = phone.value;
    //     let email1 = email.value;
    //     if(!type||!plan||!count||!count1||!user1||!company1||!phone1||!email1){
    //         alert('不能为空')
    //         return;
    //     }
    //     post({
    //         type:'POST',
    //         url:'/v1/consult/sub',
    //         data: {
    //             c_type:type,
    //             c_plan:plan,
    //             count:count1,
    //             user:user1,
    //             company:company1,
    //             phone:phone1,
    //             email:email1
    //         },
    //         success:function(res){
    //             if(res.code === 200){
    //                 //console.log(res)
    //                 alert(res.msg)
    //             }else{
    //                 alert(res.msg)
    //             }
    //         }
    //     })
    // })
    arr.forEach((v,index)=>{
        select_1.innerHTML += `
            <option value="${index+1}">${v.name}</option>
        `
    })
    let nodeArr = document.querySelectorAll('#select_1 option');
    select_1.addEventListener('click',()=>{
        for( let i =0;i<select_1.children.length;i++){
            if(select_1.children[i].selected){
                select_2.innerHTML = '';
               creat(i)
            };
        }
       
    })
    creat(0)
    function creat(n){
        arr[n].msg.forEach((item,i)=>{
            select_2.innerHTML += `
                <option value="${i+1}">${item}</option>
                `
        })
    }
    back_btn.addEventListener('click',()=>{
        history.back(-1)
    })
    }
</script>
</html>